<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link rel="stylesheet" type="text/css" href="./key.css">-->
    <style type="text/css" media="screen">
.board{
    margin: 0 auto;
    padding: 0 auto;
    width: 600px;
    height: 450px;

    margin-top: 50px;

    background: rgb(210,210,210);
    border-radius: 20px;
    position: relative;
    box-shadow: 0px 5px 6px rgb(160,160,160);
    background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
    /* background:linear-gradient(60deg,rgba(250,250,250,1) 20%,rgba(210,210,210,1)); */
}
.board:before{
    content: '';
    display: block;
    width: 780px;
    height: 20px;
    background: rgb(210,210,210);
    border-radius: 0px 0px 3px 3px;
    border-top-left-radius: 390px 18px;
    border-top-right-radius: 390px 18px;
    position: absolute;
    top:-20px;
    left: -90px;
     border-bottom: 2px solid rgb(0,0,0);
    background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
}
/*.board:after{
    content: '';
    display: block;
    width:774px;
    height: 2px;
    background-color: rgb(30,30,30);
    position: absolute;
    top: 0px;
    left: -87px;
}*/
.blackbar{
    width: 450px;
    height: 18px;
    position: absolute;
    left: 75px;
    /* background: #000000; */
    border-radius: 2px;
    border-bottom: 2px solid #ffffff; /* 小白边 */
    border-right: 2px solid #ffffff;
    background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
    background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}
.keyboard{
    position: absolute;
    width:530px;
    height: 216px;
    left: 35px;
    top: 35px;
    border: 1px solid rgb(180,180,180);
    border-radius: 8px;
    background:rgba(250,250,250,1);
    box-shadow:2px 0px 2px rgb(180,180,180) inset,
    0px 3px 3px rgb(180,180,180) inset,
    -5px -0px 1px rgb(255,255,255) inset,
    0px -3px 3px rgb(180,180,180) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul,li{
    list-style: none;
    margin:0 auto;
    padding:0 auto;
    display: block;
    font-family: "Vrinda";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul{
    width:530px;
    margin-top: 8px;
    padding-left: 8px;
    /* border:2px solid black; */
}
li{
    width:29px;
    height:29px;
    float: left;
    /* padding-left: 0px; */
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: rgb(30,30,30);
    color: rgb(200,200,200);
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    border-radius: 4px;

    border: 1px solid rgb(70,70,70);
    box-shadow: 1px 0px 0px rgb(0,0,0),
    0px 1px 0px rgb(0,0,0),
    -1px 0px 0px rgb(0,0,0),
    0px -1px 0px rgb(0,0,0);

}
li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),
li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),
li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),
li:nth-child(13),li:nth-child(14){
    width:30px;
    height:15px;
    /* float: left; */
    /* padding-left: 0px; */
    /* margin-right: 5px;
    margin-bottom: 5px;
    background-color: rgb(30,30,30);
    border-radius: 4px; */
}


li:nth-child(16),li:nth-child(17),li:nth-child(18),li:nth-child(19),li:nth-child(20),
li:nth-child(21),li:nth-child(22),li:nth-child(23),li:nth-child(24),li:nth-child(25),
li:nth-child(26),li:nth-child(27){
    /*box-sizing: border-box;
    padding-top: 4px;*/
}
li:nth-child(15) span,li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span,
li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span,
li:nth-child(26) span,li:nth-child(27) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,li:nth-child(53) span,li:nth-child(54) span,li:nth-child(64) span,li:nth-child(65) span,li:nth-child(66) span{
    display: block;
    margin-top: 5px;
    line-height: 0.5;
}


li:nth-child(28),li:nth-child(29){
    width:45px;
}
li:nth-child(43),li:nth-child(55){
    width:55px;
}
li:nth-child(56),li:nth-child(67){
    width:73px;
}
li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),
li:nth-child(72),li:nth-child(73),li:nth-child(74){
    height:33px;
}
li:nth-child(72){
    width:173px;
}
li:nth-child(71),li:nth-child(73){
    width:37px;
}
li:nth-child(75),li:nth-child(77),li:nth-child(78){
    margin-top: 18px;
    height: 14px;
}
li:nth-child(76){
    height: 13px;
    margin-top: 19px;
}
li:nth-child(78){
    position: absolute;
    bottom: 22px;
    right:38px;
}
.touch{
    position: absolute;
    width:200px;
    height:150px;
    border: 2px solid rgb(190,190,190);
    /* box-shadow: 1px 0px 0px rgb(160,160,160) inset,
    0px 1px 0px rgb(160,160,160) inset,
    0px -1px 0px rgb(160,160,160) inset; */
    bottom: 23px;
    left: 200px;
    border-radius: 8px;
}
    </style>
</head>
<body>
<h1>http://e.jikexueyuan.com/c.html</h1>
<p>http://codepen.io/</p>
<p>http://www.jobbole.com/</p>
    <div class="board">
        <div class="blackbar">

        </div>
        <div class="keyboard">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li><span>~</span><span>`</span></li>
                <li><span>!</span><span>1</span></li>
                <li><span>@</span><span>2</span></li>
                <li><span>#</span><span>3</span></li>
                <li><span>$</span><span>4</span></li>
                <li><span>%</span><span>5</span></li>
                <li><span>^</span><span>6</span></li>
                <li><span>&amp;</span><span>7</span></li>
                <li><span>*</span><span>8</span></li>
                <li><span>(</span><span>9</span></li>
                <li><span>)</span><span>0</span></li>
                <li><span>—</span><span>-</span></li>
                <li><span>+</span><span>=</span></li>
                <li></li>
                <li></li>
                <li>Q</li>
                <li>W</li>
                <li>E</li>
                <li>R</li>
                <li>T</li>
                <li>Y</li>
                <li>U</li>
                <li>I</li>
                <li>O</li>
                <li>P</li>
                <li><span>{</span><span>[</span></li>
                <li><span>}</span><span>]</span></li>
                <li><span>|</span><span>\</span></li>
                <li></li>
                <li>A</li>
                <li>S</li>
                <li>D</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li><span>:</span><span>;</span></li>
                <li><span>"</span><span>'</span></li>
                <li></li>
                <li></li>
                <li>Z</li>
                <li>X</li>
                <li>C</li>
                <li>V</li>
                <li>B</li>
                <li>N</li>
                <li>M</li>
                <li><span>&lt;</span><span>,</span></li>
                <li><span>&gt;</span><span>.</span></li>
                <li><span>?</span><span>/</span></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>By Pure CSS.To Be Continued.</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="touch">

        </div>
    </div>
</body>
</html>
